<template>
  <div class="box">
    <el-tabs
        v-model="tabsValue"
        type="card"
        class="demo-tabs"
        @tab-remove="removeTab"
        @tab-change="tabChange"
    >

      <el-tab-pane
          v-for="item in routerList"
          :key="item.id"
          :label="$i18n.enToGlobal(item.title)"
          :name="item.id"
          closable
      >
        <iframe :src="item.path"
                class="iframe"
        ></iframe>
      </el-tab-pane>

    </el-tabs>
  </div>

</template>
<script>

import event from "../../../components/node-kantboot/libs/event/index.js";

export default {
  data() {
    return {
      tabsValue: '0',
      editableTabs: [],
      routerList: {}
    }
  },
  mounted() {
    this.initTabsValue();
    this.$kt.event.on('router:toPage', () => {
      this.initTabsValue();
    });
    event.on("i18n:change", ()=>{
      // TODO 将routerList重新国际化
    });
  },
  methods: {
    /**
     * 初始化tabsValue
     * @returns {string}
     */
    initTabsValue() {
      this.routerList = this.$kt.storage.get('routerList');
      if(this.routerList&&this.routerList.length>0){
        this.setTabsValue(this.routerList[0].id);
      }
      this.$forceUpdate();
    },
    /**
     * 设置tabsValue
     * @param tabsValue
     */
    setTabsValue(tabsValue) {
      this.tabsValue = tabsValue;
      localStorage.setItem('ktMain.tabsValue', tabsValue);
    },
    /**
     * tab切换
     * @param tab
     */
    tabChange(tab) {
    },
    removeTab(id) {
      this.routerList.forEach((item, index) => {
        if (item.id === id) {
          this.routerList.splice(index, 1);
          if(index===0){
            this.setTabsValue(this.routerList[0].id);
          }else{
            this.setTabsValue(this.routerList[index-1].id);
          }

        }
      });
      this.$kt.storage.set('routerList', this.routerList);
    }
  },
  watch: {

  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px 0 32px;
  box-sizing: border-box;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  //color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.iframe {
  width: 100%;
  height: calc(100vh - 80px);
  border-radius: 10px;
  box-sizing: border-box;
  border: none;
}

</style>
